<template>
	<scroll-view class="main">
		<!-- 下单弹窗 -->
		<view class="maskClass" v-show="showMask" >
		    <view v-show="showMask" style="width:70%; background-color: #fff;padding: 15px;border-radius: 15rpx;margin: 65rpx auto;z-index: 1;">
				<view style="text-align: center;">
					<text style="padding: 35rpx; font-size:35rpx; font-weight:700; text-align:center" >	请选择</text>
				</view>
		        <view style="width: 100%;margin-top:35rpx;" class="uni-list">
		        	<radio-group style="font-size: 25rpx;" @change="change">
		        	  <radio value="0" />
		        	  在线预约
		        	  <radio value="1" checked style="margin-left: 35rpx;" />
		        	  立即下单
		        	</radio-group>
		        </view>
				<view class="login_from_input">
					<view class="form-left">服务时间</view>
					<view class="login_from_fun">
						<picker style="width: 100%;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view style="font-size: 25rpx; float:left;">{{ date || '请选择服务时间' }}</view>
						</picker>
					</view>
				</view>
				<view class="login_from_input">
					<view class="form-left">
						<text>服务内容</text>
					</view>
					<view class="login_from_fun" style="height: 200rpx;"><input	 v-model="orderInfo.details" placeholder="请输入服务内容"></view>
				</view>
				<view class="login_from_input">
					<view class="form-left">联系电话</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="orderInfo.userTelphone" placeholder="请输入联系电话"></view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="submitOrder()">提交</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
		    </view>
		</view>
		<view class="main">
			<!-- 成果详情 -->
			<view class="top">
				<text class="title">{{machineDetail.title}}</text>
				<!-- <uni-tag text="立即下单" type="primary" style="margin-right: 15rpx; 
				width: 80px;text-align: center; float:right" @click="dial()"></uni-tag> -->
				
			</view>
			<view class="type">
				<text class="creator">登记单位：{{machineDetail.inventor}}</text>
				<text class="publishTime">登记时间：{{machineDetail.applicationDate}}</text>
			</view>
			<view class="type">
				<text class="creator">所在城市：{{machineDetail.city}}</text>
			</view>
			<scroll-view class="content">
				<view style="display: flex;width: 100%;float: left;">
					<text style="font-size: 30rpx;font-weight: 700;color: blue; float: left;">简介</text>
					<!-- <button style="margin-right: 25rpx; width: 100px;text-align: center; float:right" type="primary" size="mini" @click="toggle('center')">申请购买</button> -->
				</view>
				<view style="display: flex;width: 100%;float: left;">
					<text style="margin-top: 25rpx;">
						{{machineDetail.briefDescription?machineDetail.briefDescription:'暂无'}}
					</text>
				</view>
			</scroll-view>
		</view>
	</scroll-view>
</template>

<script>
	
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	
	import env from '../../../utils/env';
	import * as order from '@/api/personCenter/ORDER.js'
	import * as data from "@/api/system/dict/data" 
	import * as achivement from "@/api/achivement/achievement.js";
	import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
    export default {
		components: {
			uniPopup
		},
		data() {
			return {
				machineDetail: {},
				categaryLisy:[],
				showPopup:false,
				type: 'top',
				orderStatus:'0',
				//截止时间选择相关
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				phone:'',
				detail:'',
				orderInfo:{
						details: '',//订单详情描述
						orderType: '',//订单类型
						serverId: '',//服务ID
						serverName: '',//服务名称
						subscribeDate: '',//预约时间
						userId: '',//下单人ID
						userName: '',//下单人名字
						userTelphone:''//下单人电话
				},
				jslbList:[],
				cgTypeList: [],
				showMask: false,
				noData:'加载中。。。'
			}
		},
		onLoad(option) {
			// this.getCategaty()
			this.orderStatus = option.orderType
			this.orderInfo.orderType =  option.orderType
			this.getMachineDetail(option.id);
			this.getDict()
		},
		methods:{
			getDict(){
				data.getDicts('achievement_chengguo_type').then((res)=>{
					this.cgTypeList = res.data
				})
				data.getDicts('ach_kjcgssgxjslb').then((res)=>{
					this.jslbList = res.data;
				})
			},
			getUser(){
				var value = uni.getStorageSync('userInfo')||[]
				if(value.login_user == null){
					uni.showToast({
						icon:'none',
						title:'请先登录！'
					})
					this.showMask = false
					uni.navigateTo({
						url:'/subpages/pages/register/login_province'
					})
				}else{
					this.orderInfo.userName = value.login_user.member.username
					this.orderInfo.userId = value.login_user.member.id
				}
			},
			getMachineDetail(id){
				achivement.getPatent(id).then((res)=>{
					this.machineDetail = res.data;
					this.machineDetail.recordDate = this.machineDetail.recordDate.substring(0,10)
				});
				if(this.machineDetail== {}){
					this.noData = '暂无数据，点击重试！'
				}
			},
			dial(){
				this.showPopup = true
			},
			toggle(type) {
			    // this.type = type;
			    // this.$refs['popup'].open();
				this.showMask = true
				this.getUser()
			},
			closePopup(){
				this.showMask = false
			},
			change(e) {
			},
			bindDateChange(e) {
				this.date = e.detail.value;
			},
			submitOrder(){
				if(this.orderInfo.userTelphone == ''){
					uni.showToast({
						icon:"none",
						title:"联系电话不能为空！"
					})
				}else{
					this.orderInfo.subscribeDate = this.date
					this.orderInfo.serverId = this.machineDetail.serviceAgencyId
					this.orderInfo.serverName = this.machineDetail.mInstruCHNName
					order.addORDER(this.orderInfo).then((res)=>{
						if(res.code == '200'){
							uni.navigateTo({
								url:'/subpages/pages/my/orderList/order_list'
							})
						}
					})
				}
			}
		}
	}
	
</script>

<style>
	
	.main {
		background-color: #e1e1e1;
	}
	
	image {
		width: 100%;
	}
	
	.top{
		/* position: fixed; */
		height: 80rpx;
		margin-top: 30rpx;
		padding-top: 35rpx;
		background-color: #fff;
	}
	
	.type{
		/* position: fixed; */
		height:80rpx;
		background-color: #fff;
		margin-top: 15rpx;
		padding-top: 15rpx;
	}
	
	.content{
		/* position: fixed; */
		width: 100%;
		height: 780rpx;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		line-height: 50rpx;
		padding: 25rpx;
		background-color: #fff;
	}
	
	.title {
		display: -webkit-box;
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
		font-weight: 700;
		padding-left: 15rpx;
		padding-right:15rpx
	}
	
	.creator {
		font-size: 28rpx;
		padding: 15rpx;
		float: left;
	}
	
	.publishTime {
		font-size: 28rpx;
		padding: 15rpx;
		margin-top: 45rpx;
		float: right;
	}
	
	.detail_content {
		margin-top: 15rpx;
/* 		text-indent: 2em; */
		line-height: 50rpx;
		justify-content: flex-start;
		padding: 25rpx;
	}
	
	.uni-form-item {
		margin: 60rpx 30rpx;
		border-radius: 50px;
		}
		
	.uni-form-item button{
		background-color: #016fb8;
		height: 70rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	
	.login_from_input{
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 20upx 0px; 
		margin: 0px auto; 
		background-color: #fff;
	} 
	
	.login_from_name{
		width: 30%; 
		margin-left: 40rpx;
		font-size: 30rpx;
	}
	.login_from_fun{ 
		width: 70%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		text-align: right; 
		margin-left: 25rpx;
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	/deep/ .uni-popup .uni-popup__wrapper {
	    width: 70% !important;
		margin: 0 auto;
	}
	
	.submit_view {
		height: 90rpx;
	}
		
	.submit_view .submit{
		background-color: #016fb8;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: left;
	}
	.submit_view .canncle{
		background-color: darkgray;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: right;
	}
	
	.maskClass {
		position:fixed;
		bottom:0;
		top:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.5);
		z-index: 2;
	}	
</style>